<template>
  <div>
    <el-tabs v-model="editableTabsValue"  @tab-remove="removeTab" @tab-click="clickTab">
      <el-tab-pane :name="defaultActiveName" label="我的通知列表">
        <my-notice-search-bar v-on:search="search"></my-notice-search-bar>
        <el-button-group style="margin-bottom: 7px;float: left;">
            <el-button size="mini" type="primary" @click="deleteById" icon="el-icon-delete">删除</el-button>
        </el-button-group>
        <el-table
          v-loading="loading"
          border
          size="mini"
          :data="baseDto.lstDto"
          @row-click="rowClick"
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="标题"
            width="600">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 'A101501'" type="success" effect="dark">{{scope.row.title}}</el-tag>
              <el-tag v-if="scope.row.status == 'A101502'" type="danger" effect="dark">{{scope.row.title}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="通知类型"
            prop="typeLabel"
            width="100">
          </el-table-column>
          <el-table-column
            label="优先级"
            prop="priorityLevelLabel"
            width="100">
          </el-table-column>
          <el-table-column
            label="状态"
            width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 'A101501'" type="success" effect="dark">{{scope.row.statusLabel}}</el-tag>
              <el-tag v-if="scope.row.status == 'A101502'" type="danger" effect="dark">{{scope.row.statusLabel}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.createTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageIndexChange"
          :current-page="searchModel.pageDto.pageNum"
          :page-sizes="searchModel.pageDto.pageSizes"
          :page-size="searchModel.pageDto.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="baseDto.page.total">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane
        v-for="(item) in editableTabs"
        :key="item.key"
        :label="item.label"
        :name="item.name"
        closable>
        <my-notice-detail v-if="item.key == 'detail'"  v-bind:selectedModel="selectedModel"></my-notice-detail>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Vue from 'vue'
import MyNoticeSearchBar from './my-notice-search-bar'
import MyNoticeDetail from './my-notice-detail'

export default {
  name: 'my-notice-list',
  components: {
    MyNoticeDetail,
    MyNoticeSearchBar
  },
  data () {
    return {
      loading: true,
      searchModel: {
        pageDto: {
          pageSize: 10, pageNum: 1, pageSizes: [10, 20, 30, 100]
        },
        title: null
      },
      baseDto: {page: {total: 0}},
      selectedModel: {},
      defaultActiveName: 'MyNoticeList',
      editableTabsValue: 'MyNoticeList',
      editableTabs: [],
      tabIndex: 2,
      checkedDataList: [] // 选择的数据集合
    }
  },
  created: function () {
    this.listPage()
  },
  methods: {
    handleSelectionChange: function (val) {
      this.checkedDataList = val
    },
    listPage: function () {
      Vue.$ajax({
        method: 'post',
        url: Vue.$adminServerURL + '/web/v1/MyNoticeController/listPage',
        data: this.searchModel
      }).then(res => {
        this.loading = false
        if (res.data.flag === 'SUCCESS') {
          this.baseDto = res.data
        } else {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        }
      })
    },
    pageSizeChange: function (e) {
      this.searchModel.pageDto.pageSize = e
      this.listPage()
    },
    pageIndexChange: function (e) {
      this.searchModel.pageDto.pageNum = e
      this.listPage()
    },
    search: function (p) {
      if (!p.isCollapse) { // 非高级查询，则只需要根据关键字查询
        this.searchModel.title = p.searchKey
      } else {
        this.searchModel = p.searchModel
      }
      this.searchModel.pageDto.pageNum = 1
      this.loading = true
      this.listPage()
    },
    rowClick: function (row, column, event) {
      this.selectedModel = row
      this.addTab('查看通知内容-' + row.title, row.id + '', 'detail')
    },
    deleteById: function (id) {
      if (this.checkedDataList == null || this.checkedDataList.length !== 1) {
        this.$message({
          message: '请选择一条数据',
          type: 'warning'
        })
        return
      }

      let data = this.checkedDataList[0]

      this.$confirm('您确定删除该记录吗', '询问', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Vue.$ajax({
          method: 'delete',
          url: Vue.$adminServerURL + '/web/v1/MyNoticeController/' + data.id
        }).then(res => {
          if (res.data.flag !== 'SUCCESS') {
            if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
              this.$message({
                message: res.data.message,
                type: 'warning'
              })
            }
          } else {
            this.$message({
              message: '成功',
              type: 'success'
            })
            this.listPage()
          }
        })
      }).catch(() => {
      })
    },
    addTab: function (label, name, key) {
      let ele = {label: label, name: name, key: key}
      let flag = false

      for (let i = 0; i < this.editableTabs.length; i++) {
        let var1 = this.editableTabs[i]
        if (var1.name === name) {
          flag = true
          break
        }
      }

      if (!flag) {
        this.editableTabs.push(ele)
      }
      this.editableTabsValue = name
    },
    removeTab: function (targetName) {
      let tabs = this.editableTabs
      let activeName = this.editableTabsValue
      // if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          let nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          } else {
            activeName = this.defaultActiveName
            this.listPage()
          }
        }
      })
      // }

      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter(tab => tab.name !== targetName)
    },
    clickTab: function (tab) {
      if (tab.name === this.defaultActiveName) {
        this.listPage()
      }
    }
  }
}
</script>
